/*	MKM CSS Framework
-------------------------------------- */

/*	NOTE

Try to re-use classes where possible. Also, try to keep things
organised. Put things in the right sections. CTRL+F to find
the sections you need.

*/

/*	Import styles  */

@import url("960.css");
@import url("common.css");

	
/*	Generic tag styles
-------------------------------------- */

* {
	margin: 0;
	padding: 0; /* resets all browser default spacing */
}
body {
	background-color: #ccc;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small; /* browser default of 10px, do not change. */
	line-height: 1.0;
}
a {
	color: #0075ff;
}
a:hover {
	color: #000;
}
a.external-link{
	padding-right:13px;
	background-image:url(../img/framework/external-link.gif);
	background-position:center right;
	background-repeat:no-repeat;
}
a.external-link:hover{
	background-image:url(../img/framework/external-link-hover.gif);
}
a.el-left{
	padding-left:13px;
	padding-right:0px;
	background-position:center left;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
	line-height: 20px;
	margin: 20px 0 10px;
}
h1 {
	font-size: 24px;
}
h1 a {
	text-decoration: none;
}
h2 {
	font-size: 20px;
}
h3 {
	font-size: 16px;
}
h4 {
	font-size: 14px;
}
h5,
p,
ul,
ol,
dl {
	font-size: 12px;
}
ul, ol {
	padding: 0 0 0 30px;
}
abbr,
acronym {
	border-bottom: 1px dotted;
	cursor: help;
	font-size: 9px;
	letter-spacing: 1px;
	line-height: 20px;
	text-transform: uppercase;
}
blockquote {
	background: url("../img/framework/quote.png") no-repeat 5px 0;
	font-family: Georgia, Times, serif;
	margin: 0;
	padding: 0 30px;
}
blockquote p {
	font-size: 14px;
}
textarea {
	overflow: auto; /* remove scrollbar from textareas unless needed */
}


/*	Page elements
-------------------------------------- */

/* =Container */

#container{
}

/* =Header */

#header {
	background-color: #333;
	color: #ccc;
	height: 100px;
	position: relative;
}
#header a {
	color: #ccc;
}
#header a:hover {
/*	color: #fff;*/
}

/* =Logo */

#logo{
	margin-left:10px;
}

/* =Navigation */

ul#navigation-extra {
	position: absolute;
	top: 10px;
	right: 10px;

}
ul#navigation-extra li {
	margin-right: 10px;
}
ul#navigation-primary {
	height: 30px;
	margin-top: 20px;
	position: absolute;
	left: 10px;
	bottom: 0;
}
ul#navigation-primary li a {
	display: inline;
	float: left;
	margin-right: 10px;
	height: 20px;
	padding: 5px 10px;
}
ul#navigation-primary li a:hover {
	background-color: #666;
	color: #fff;
}
ul#navigation-primary li.current a {
	background-color: #fff;
	color: #333;
}
ul#navigation-secondary {
	border-bottom: 1px solid #ccc;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:10px;
}
ul#navigation-secondary li {
	margin-right: 20px;
}

/* =Content */

#content {
	background-color: #fff;
	color: #333;
}
#breadcrumbs {
	font-size: 11px;
	margin-top: 10px;
	margin-bottom: 0;
	margin-left:10px
}

/* =Datagrid */

.datagrid tr.hover{
	background-color:#efefef;
}

/* =Footer */

#footer {
	background-color: #666;
	color: #ccc;
}
#footer a {
	color: #ccc;
}
#footer a:hover {
	color: #fff;
}
ul.footer-links {
	margin-top: 10px;
	margin-left:10px;
}
#footer h5,
#footer p{
	margin-left:10px;
}

/*  Carousel navigation
-------------------------------------- */

div.slide-nav{
	text-align:center;
	margin-top:10px;
}
	div.slide-nav a{
		display:inline-block;
		background-position:center center;
		background-repeat:no-repeat;
		background-image:url(../img/framework/slide-dot-off.png);
		width:10px;
		height:0px;
		overflow:hidden;
		padding-top:10px;
		margin:0px 2px;
	}
		div.slide-nav a:hover{
			background-image:url(../img/framework/slide-dot-over.png);
		}
		div.slide-nav a.activeSlide{
			background-image:url(../img/framework/slide-dot-active.png);
		}

/*	Form elements
-------------------------------------- */

/*	NOTE

Make sure all forms follow the same markup styles.

*/

fieldset {
	background: 0;
	border: 0;
}
fieldset legend {
	font-weight: bold;
	font-size: 14px;
}
input,
select,
textarea {
	font: 12px/16px Arial, Helvetica, sans-serif;
}
ol.textentry {
	margin: 0;
	padding: 0;
	list-style: none;
}
ol.textentry li {
	margin: 10px 0;
}
ol.textentry label {
	display: inline;
	line-height: 1.667;
}
ol.textentry input,
ol.textentry textarea,
ol.textentry select {
	border: 1px solid #C8C8C8;
	border-top-color: #939393;
	background: #fff url("../img/framework/input-bg.png") repeat-x 0 -1px;
	color: #333;
}
ol.textentry input,
ol.textentry textarea {
	color: #666;
	padding: 4px;
}
ol.textentry .focus {
	border-color: #4FC1FF;
	border-top-color: #0092DF;
	color: #333;
}
ol.textentry .radios input {
	border: 0;
	margin-right: 5px;
}
.required {
	color: #777;
	font-size: 9px;
	font-style: normal;
	line-height: 1.0;
	margin-left: 10px;
	text-transform: uppercase;
}
p.submit {
	margin-top: 10px;
}
p.submit input,
a.linkbutton {
	background: #efefef url("../img/framework/button-bg.png") repeat-x 0 0;
	border: 1px solid #ccc;
	color: #333;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	height: 30px;
	line-height: 30px;
	padding: 2px 8px;
	text-decoration: none;
}
a.linkbutton-small {
	font-size: 12px;
	line-height: 20px;
	height: 20px;
	padding: 0 6px;
}
p.submit input:hover,
a.linkbutton:hover {
	background-color: #0091fb;
	background-position: 0 -35px;
	border-color: #0063b4;
	color: #fff;
}

/*  Twitter feed
-------------------------------------- */

div.tweet{
  margin:0px 0px 10px 0px;
  padding-bottom:10px;
  border-bottom:1px dotted #AAA;
  display:block;
  min-height:22px;
}
div.tweet img{
	float:left;
	background-color:#fff;
	border:1px solid #AAA;
	padding:2px;
}
  div.tweet blockquote{
    color:#000;
    margin:0px 0px 0px 0px;
    font-style:italic;
    font-size:12px;
    line-height:15px;
	background-image:none;
  }

/*  Table filter
-------------------------------------- */
div.filter{
	height:20px;
	padding-left:20px;
	float:right;
	background-image:url(../img/framework/filter-bar-bg.png);
	background-position:left;
	background-repeat:no-repeat;
}
div.filter input{
	display:inline-block;
	float:left;
	width:130px;
	height:15px !important;
	font-size:11px;
	line-height:11px;
	background-color:none;
	border:none;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	padding:3px 0px 0px 0px;
	margin:0px;
	outline: none;
}
div.filter input.focus{
	border:none;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	color: #333;
	outline: none;
}
div.filter a{
	display:inline-block;
	float:left;
	width:20px;
	height:20px;
	background-image:url(../img/framework/filter-bar-bg.png);
	background-position:right;
	background-repeat:no-repeat;
}
div.filter a span{
	display:none;
}

/*  Login panel
-------------------------------------- */
#login-form{
	text-align:right;
}
#login-form p{
	font-size:11px;
	margin:0px;
	padding:0px;
}
#login-form p.small{
	font-size:10px;
	margin-top:4px;
}
#login-form input.text{
	color:#333;
	width:75px;
	border:1px solid #999;
	font-size:11px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#login-form input.button{
	width:45px;
	color:#FFF;
	background-color:#999;
	font-size:11px;
	border:1px solid #999;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	cursor:pointer;
}

/*  Back to top button
-------------------------------------- */

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -50px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(../img/framework/up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

/*  Date icons
-------------------------------------- */

p.date{
	margin:0px 5px 5px 0px;
	padding:0px;
	width:50px;
	display:inline-block;
	text-transform:uppercase;
	text-align:center;
	font-family:Georgia, Times, serif;
	font-size:11px;
	line-height:16px;
	font-weight:bold;
	color:#EFEFEF;
	box-shadow:0px 1px 2px #000;
	-webkit-box-shadow:0px 1px 2px #000;
	-moz-box-shadow:0px 1px 2px #000;
	background-color:#8D2C2C;
	text-shadow:0px -1px 0px #310F0F;
	border-top:1px solid #E2CACA;
}
p.date span{
	display:inline-block;
	width:50px;
	height:40px;
	color:#353535;
	text-shadow:0px 1px 0px #FFF;
	background-color:#EFEFEF;
	border-bottom:1px solid #ABABAB;
	border-top:1px solid #310F0F;
	font-size:32px;
	line-height:36px;
}

p.date.floating{
	float:left;
	margin:25px 14px 5px 0px;
}

p.date.red{
	background-color:#8D2C2C;
	text-shadow:0px -1px 0px #310F0F;
	border-top:1px solid #E2CACA;
}
p.date.red span{
	border-top:1px solid #310F0F;
}

p.date.blue{
	background-color:#006699;
	text-shadow:0px -1px 0px #002435;
	border-top:1px solid #70A9C6;
}
p.date.blue span{
	border-top:1px solid #002435;
}

p.date.green{
	background-color:#355829;
	text-shadow:0px -1px 0px #121F0E;
	border-top:1px solid #8EA187;
}
p.date.green span{
	border-top:1px solid #121F0E;
}

p.date.grey{
	background-color:#666;
	text-shadow:0px -1px 0px #131313;
	border-top:1px solid #999;
}
p.date.grey span{
	border-top:1px solid #131313;
}

p.date.small{
	width:30px;
	font-size:10px;
	line-height:13px;
	font-family: Arial, Helvetica, sans-serif;
}
p.date.small span{
	width:30px;
	height:23px;
	font-size:17px;
	line-height:19px;
	font-family:Georgia, Times, serif;
}
p.date.small.floating{
	float:left;
	margin:25px 10px 3px 0px;
}